import Event from '../contorl/src/event/index'
import { View } from "@tarojs/components"
import store from '../contorl/src/store'
import Taro from '@tarojs/taro'
import './index.scss'

import { useEffect, useState } from 'react'


export const Over = () => {
  const [isGameOver, setIsGameOver] = useState(false)
  useEffect(() => {
    Event.on('gameover', () => {
      setIsGameOver(true)
    })
    return () => {
      Event.off('gameover')
    }
  })
  const restart = () => {
    setIsGameOver(false)
    Event.emit('restart')
  }
  const close = () => {
    Taro.navigateBack()
  }
  return <View>
      {isGameOver ? <View className='nm-pages-index-over-container'>
        <View className='gameover'>
          <View className='title'>游戏结束</View>
          <View className='score'>本局得分: {store.score}</View>
          <View className='score odl-score'>最高分: {store.odlValue}</View>
          <View className='footer'>
            <View onClick={() => restart()}
                  className='restart btn'>重新开始</View>
            <View onClick={() => close()}
                  className='exit btn'>退出游戏</View>
          </View>
        </View>
      </View> : null }
  </View>
}